<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${ctx}/css/sapar.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/common.css"/>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/js/sapar.js"></script>
    <script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
    <script type="text/javascript" src="${ctx}/js/kkpager.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/kkpager_blue.css"/>
    <script type="text/javascript" src="${ctx}/assets/laydate/laydate.js"></script>
    <title>一次品</title>
    <style type="text/css">
        #left {
            float: left;
            width: 100%;
        }

        #saper-container {
            float: left;
            width: 100%;
            background: url(${ctx}/images/dian.png) repeat-y 69% 0;
        }

        #table_left {
            float: left;
            width: 68%;
            min-height: 300px
        }

        #right {
            float: right;
            width: 30%;
            min-height: 300px
        }

        .nav_list {
            float: left;
            margin-left: 30px;
        }

        .nav_list ul {
            float: left
        }

        .nav_list ul li {
            float: left;
            padding: 0 10px;
            height: 30px;;
            line-height: 30px;
            font-size: 14px;
            color: #333
        }

        .nav_list ul li.native {
            background-color: #6ab96e;
            color: #fff
        }

        th {
            text-align: center;
        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>
<div id="left">
    <div id="saper-container">
        <div id="saper-hd"></div>
        <div id="saper-bd">
            <div class="subfiled clearfix">
                <h2>一次品</h2>
            </div>
            <div class="subfiled-content">
                <div class="search-box clearfix">
                    <div class="kv-item clearfix">
                        <label>发票编号：</label>
                        <div class="kv-item-content">
                            <input type="text" name="searchTxt" placeholder="发票编号" value="${tiaojian }"
                                   class="search_text" id="sousuo"
                                   onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')">
                        </div>
                    </div>
                    <div class="kv-item clearfix">
                        <!-- <label>最近时间：</label> -->
                        <div class="nav_list">
                            <span>起始时间:</span>
                            <input type="text" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="st"
                                   name="startTime"
                                   value="<fmt:formatDate value='${st}' type='date' pattern='yyyy-MM-dd HH:mm:ss'/>"
                                   placeholder="起始时间" readonly="readonly">
                            <span>终止时间:</span>
                            <input type="text" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="et"
                                   name="endTime"
                                   value="<fmt:formatDate value='${et}' type='date' pattern='yyyy-MM-dd HH:mm:ss'/>"
                                   placeholder="终止时间" readonly="readonly">
                        </div>
                    </div>
                    <a href="javascript:;" class="sapar-btn sapar-btn-recom query-btn">查询</a>
                </div>
                <!--表格开始-->
                <div id="table_left" class="table">
                    <!--表格操作-->
                    <div class="table-operate ue-clear">
                        <a href="javascript:;" class="add">添加</a>
                        <a href="javascript:;" class="del">删除</a>
                    </div>
                    <!--表格具体内容-->
                    <div class="table-box">
                        <table>
                            <thead>
                            <tr>
                                <th><input type="checkbox" id="checkall" name="checkall"/></th>
                                <th>入库批次</th>
                                <th>发票号</th>
                                <th>入库时间</th>
                                <th>入库人</th>
                                <!-- <th>审核人条码</th> -->
                                <th>审核时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:if test="${yicipinList != null}">
                                <c:forEach items="${yicipinList}" var="yicipin">
                                    <tr data="${yicipin.rukuLiushui}" class="ycpdata">
                                        <td><input type="checkbox" name="key" value="${yicipin.rukuLiushui}"/></td>
                                        <td>${yicipin.rukuLiushui}</td>
                                        <td>${yicipin.rukuFapiaohao}</td>
                                        <td><fmt:formatDate value="${yicipin.rukuTime}" type="date"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td>${empMap[yicipin.rukuRukurenTiaoma] }</td>
                                            <%-- <td>${yicipin.rukuShenheTiaoma}</td> --%>
                                        <td><fmt:formatDate value="${yicipin.rukuShenheTime}" type="date"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                    </tr>
                                </c:forEach>
                            </c:if>
                            </tbody>
                        </table>
                    </div>
                    <div id="kkpager"></div>
                </div><!--表格结束-->
                <div id="right">
                    <!--表格开始-->
                    <div class="table">
                        <div class="table-box">
                            <div class="table-operate ue-clear">
                                一次品批次明细
                            </div>
                            <table id="detail">
                                <thead>
                                <tr>
                                    <th>产品名称</th>
                                    <th>产品数量</th>
                                    <th>有效期天数</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <input id="leftPage" class="butLeft" type="button" value="上一页"/>
                            <input id="rightPage" class="butRight" type="button" value="下一页"/>
                            <span>到第&nbsp;</span><input id="goPage" class="textBox" type="text" value="1"/><span
                                style="margin-left: 4px;">页&nbsp;</span>
                            <input id="sureBut" class="sure" type="button" value="确定"/>
                            <span>共</span><span class="totalPages" id="totalNum">0</span><span>&nbsp;页</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="saper-ft">
        </div>
    </div>
</div>
<script type="text/javascript">
    var pageSize = 10, currentPage = 1, totalPage;
    var data = [];
    $(function () {
        var tiaojian = $("#sousuo").val();
        var startTime = $("#st").val();
        var start = new Date(startTime.replace("-", "/").replace("-", "/"));
        var endTime = $("#et").val();
        var end = new Date(endTime.replace("-", "/").replace("-", "/"));

        var totalPage = ${total};
        var pageNo = getParameter('pageIndex');
        if (!pageNo) {
            pageNo = 1;
        }
        //生成分页
        //有些参数是可选的，比如lang，若不传有默认值
        kkpager.generPageHtml({
            pno: pageNo,
            //总页码
            total: totalPage,
            //链接前部
            hrefFormer: '${ctx}/oneOff/yicipinList',
            //链接尾部
            hrefLatter: '.do',
            getLink: function (n) {
                return this.hrefFormer + this.hrefLatter + "?pageIndex=" + n + "&searchTxt=" + $(".search_text").val() + "&startTime=" + startTime + "&endTime=" + endTime + "&tiaojian=" + tiaojian;
                ;
            }
        });
        $(".query-btn").click(function () {
            var btn = true;
            tiaojian = $("#sousuo").val();
            startTime = $("#st").val();
            start = new Date(startTime.replace("-", "/").replace("-", "/"));
            endTime = $("#et").val();
            end = new Date(endTime.replace("-", "/").replace("-", "/"));
            if (end < start) {
                alert("终止时间不能在起始时间之前");
                btn = false;
                return btn;
            }
            if (btn) {
                window.location.href = "${ctx}/oneOff/yicipinList.do?startTime=" + startTime + "&endTime=" + endTime + "&tiaojian=" + tiaojian;
            }
        });

        $(".add").click(function () {
            window.location.href = "${ctx}/oneOff/yicipinEdit.do";
        });
        $("#checkall").click(function () {
            if (this.checked) {
                $("input[name='key']").prop('checked', true)
            } else {
                $("input[name='key']").prop('checked', false)
            }

        });

        $(".del").click(function () {
            var chk_value = getSelRecord();
            if (chk_value.length > 0) {
                layer.confirm('你确定要删除么？', function () {
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/oneOff/yicipinDel.do?id=" + chk_value.join(),
                        error: function (request) {
                            layer.alert("网络故障，请稍后再试!");
                        },
                        success: function (data) {
                            if (data.status == "true") {
                                layer.alert("删除成功", function () {
                                    window.location.reload();
                                    $('input[name="key"]').each(function () {
                                        $("input[name='key']").prop('checked', false);
                                    });
                                });
                            } else {
                                layer.msg(data.msg);
                            }
                        }
                    });
                });
            } else {
                layer.msg('请选择要删除的数据！');
            }
        });

        $(".ycpdata").click(function () {
            $(this).addClass("xuanzhong").siblings().removeClass("xuanzhong");
            var liushuId = $(this).attr("data");
            $.ajax({
                type: "POST",
                url: "${ctx}/oneOff/yicipinDetailList.do?id=" + liushuId,
                error: function (request) {
                    layer.alert("网络故障，请稍后再试!");
                },
                success: function (data) {
                    if (data.status == "true") {
                        /* console.log(data);
                         var dataList = data.mxList;
                         var str = '';
                         $("#detail tbody").empty();
                         for(var i = 0; i<dataList.length;i++){
                         str += "<tr><td>"+dataList[i].productName+"</td><td>"+dataList[i].productNum+"</td><td>"+dataList[i].productYouxiaoqiDays+"</td></tr>";
                         }
                         $("#detail tbody").append(str); */
                        appendTable(data);
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        });

        $("#sureBut").click(function () {
            goPage();
        });
        $("#leftPage").click(function () {
            leftPages();
        });
        $("#rightPage").click(function () {
            rightPages();
        });
    });

    function getSelRecord() {
        var chk_value = [];
        $('input[name="key"]:checked').each(function () {
            chk_value.push($(this).val());
        });
        return chk_value;
    }

    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function appendTable(dataList) {
        currentPage = 1;
        data = dataList.mxList;
        packageId = dataList.packageId;
        creatTab();
    }

    //获得总页数
    function totalPages() {
        //如果刚好除尽
        if (data.length % pageSize == 0) {
            totalPage = data.length / pageSize;
        }
        else {
            totalPage = parseInt(data.length / pageSize) + 1;
        }
    }

    //上一页
    function leftPages() {
        if (currentPage != 1) {
            currentPage--;
            //开始创建
            creatTab();
        }
    }
    //下一页
    function rightPages() {
        if (currentPage != totalPage) {
            currentPage++;
            //开始创建
            creatTab();
        }
    }
    //到第几页去
    function goPage() {
        currentPage = document.getElementById('goPage').value;
        //如果输入的页数超出总页数，则到最后一页去！
        if (currentPage > totalPage) {
            currentPage = totalPage;
        }
        if (currentPage < 1) {
            currentPage = 1;
        }
        creatTab();
    }

    function creatTab() {
        //清空数据
        $("#detail tbody").empty();
        $("#checkalltwo").attr("checked", false);
        //总页数
        totalPages();
        $('#totalNum').text(totalPage);
        //插入页数
        $('#goPage').val(currentPage);
        var str = '';
        $("#detail tbody").empty();
        currentRows = (totalPage == 1 || currentPage == totalPage) ? data.length : currentPage * pageSize;
        console.log(currentPage);
        console.log(currentRows);
        for (var i = (currentPage - 1) * pageSize; i < currentRows; i++) {
            /* str += "<tr class='package'  id='"+data[i].productId+"'data=\""+packageId+"\"><td><input type='checkbox' name=\"keytwo\" value=\""+data[i].productId+"\"/></td><td>"+data[i].productId+"</td><td>"+data[i].productName+"</td><td>"+data[i].num+"</td></tr>"; */
            str += "<tr><td>" + data[i].productName + "</td><td>" + data[i].productNum + "</td><td>" + data[i].productYouxiaoqiDays + "</td></tr>";
        }
        $("#detail tbody").append(str);
    }
</script>
</body>
</html>